<template>
	<el-table
		ref="table"
		:data="currentValue"
		border
		style="width: 100%"
		@mousewheel.native.prevent="mousewheel">
		<el-table-column v-for="(field,index) in fields" :key="index" :label="field.label" :prop="field.tableName" border>
			<el-table-column v-if="field.field" v-for="(childField,index) in field.field" :key="index" :label="childField.label" :prop="childField.tableName" width="90">
				<template scope='scope'>
					<el-input type="text" v-model="scope.row[childField.tableName]"></el-input>
				</template>
			</el-table-column>
		</el-table-column>
	</el-table>
</template>
<script>
	import Vue from 'vue';
	import ElementUI from 'element-ui';
	import Fields from '../utils/wt-model-field';
	import FormUtils from '../utils/wt-form-utils';
	import TimeUtils from '../utils/wt-time-utils';
	import ModelUtils from '../utils/wt-model-utils';
	import Service from '../utils/wt-model-service';
	import PagedTable from './wt-paged-table';
	import request from 'winged/utils/axios';
	import Images from './wt-images';
	import Permission from '../utils/wt-permission';
	import ModelForm from './wt-model-form';
	import dateUtils from 'winged/utils/wt-time-utils.js'

	Vue.use(ElementUI);
	// Vue.component(PagedTable.name, PagedTable);
	// Vue.component(Images.name, Images);
	// Vue.component(ModelForm.name, ModelForm);
	const cell = 24 * 3600 * 1000//一天对应的毫秒数
	export default {
		name: 'wt-model-infinity-table',
		props: {
			model: Object,
			// value: {
			// 	type: Array,
			// 	default: null
			// },
			// 如果为true，则在组件创建后自动进行数据加载
			autoLoad: {
				type: Boolean,
				default: false
			},
			// 用于组合extraParams的参数集合
			paramsData: {
				type: Object,
				default: null
			},
			pageSize: {
				type: Number,
				default: 10
			},
			initialLoading: {
				type: Boolean,
				default: false
			},
			allowAdd: {
				type: Boolean,
				default: true
			},
			allowEdit: {
				type: Boolean,
				default: true
			},
			allowRemove: {
				type: Boolean,
				default: true
			},
			total:{
				type: Number,
				default: 0
			},
			showPagination: {
				type: Boolean,
				default: true
			},
			minHandleWidth:{
				type:Number,
				default:180
			},
			resultParam:{
				type:String,
				default:''
			},
			pageParam:{
				type:String,
				default:'index'
			},
			isReload:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				currentValue:[
					{
						'ESR+1':'1',
						'CRP+1':'2',
						'ESR+2':'2',
						'CRP+2':'4',
						'ESR+3':'5',
						'CRP+3':'6',
						'ESR+4':'',
						'CRP+4':'',
						'ESR+5':'',
						'CRP+5':'',
						'ESR#0':'',
						'CRP#0':'',
						'ESR-1':'',
						'CRP-1':'',
						'ESR-2':'',
						'CRP-2':'',
						'ESR-3':'',
						'CRP-3':'',
						'ESR-4':'',
						'CRP-4':'',
						'ESR-5':'',
						'CRP-5':'',
					}
				],
				fields:[]
			}
		},
		watch:{
			
		},

		computed: {
			
		},
		methods:{
			mousewheel:function(e){
				//console.log(e.detail)
				let dist = e.wheelDelta
				this.tableWheel(-dist)
			},
			tableWheel:function(dist){
				let els = this.$refs.table.$children
				//els.$el[0].getElementsByClassName('el-table__header-wrapper')[0]
				//let target = els[els.length - 1].$el.parentNode
				let target = this.$refs.table.$el.getElementsByClassName('el-table__body-wrapper')[0]
				target.scrollLeft = target.scrollLeft + dist
				if(target.scrollLeft < 100 && dist < 0){
					let index = this.fields[0].index - 1
					this.addField(index)
				}
				window.target = target
				console.log(target.scrollLeft,target.scrollWidth)
				if(target.scrollLeft + target.offsetWidth + 100 > target.scrollWidth && dist > 0){
					let index = this.fields[this.fields.length - 1].index + 1
					console.log('index',index)
					this.addField(index)
				}
				
			},
			addField:function(i, reserve = false){
				let label,sdate,ESR,CRP,day,item,date
				date = dateUtils.format(new Date().getTime() + i * cell,'md')
				if(i < 0){
					day = Math.abs(i)
					label = '术前' + day + '天（' + date + '）'
					sdate = 'date-' + day
					ESR = 'ESR-' + day
					CRP = 'CRP-' + day
				}else if(i == 0){
					day = Math.abs(i)
					label = '手术日（' + date + '）'
					sdate = 'date#' + day
					ESR = 'ESR#' + day
					CRP = 'CRP#' + day
				}else{
					day = Math.abs(i)
					label = '术后' + day + '天（' + date + '）'
					sdate = 'date+' + day
					ESR = 'ESR+' + day
					CRP = 'CRP+' + day
				}
				item = {
					label:label,
					tableName:sdate,
					index:i,
					field:[
						{
							label:'ESR',
							tableName:ESR,
						},
						{
							label:'CRP',
							tableName:CRP,
						}
					]
				}
				if(i > 0 || reserve ){
					this.fields.push(item)
				}else{
					this.fields.unshift(item)
				}
				this.currentValue[0][ESR] = ESR
				this.currentValue[0][CRP] = CRP
			}
		},
		created() {
			for(let i=-4; i<5; i++){
				this.addField(i,true)
			}
			console.log('fields',this.fields)
			
		},
		mounted() {
			
		}
	}
</script>
<style lang="less" scoped>
	.el-form-item{
		width:20%;
		.padR-10{
			padding-right:10px;
		}
	}
	.inner-table{
		width:100%;
	}
</style>
<style>
.el-form-item .el-form-item__content{
	width:100%;
}
.el-table .cell, .el-table th>div {
    padding-left: 6px!important;
    padding-right: 6px!important;
}
</style>